<template>
    
     <el-main v-loading="loading">
        
          <el-button type="danger" size="medium" @click.native.prevent="removeClick()">批量删除</el-button>
     <template>
      <span>商品类型</span>
      <el-select v-model="value"  placeholder="请选择" clearable @change="findSecond()">
        <el-option
          v-for="item in secondType"
          
          :key="item.id"
          :label="item.name"
          :value="item.id">
        </el-option>
        
      </el-select>
    </template>
      
      
      <el-table
      ref="multipleTable"
      :data="information.data"
      @selection-change="handleSelectionChange">
      prop="status"
      style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <div v-if="props.row.secondHand.photos" style="margin-left:46px;">
            <el-image v-for="(photo,index) in props.row.secondHand.photos.split(',')" :key="index"
              style="width: 138px; height: 138px;margin-left: 2px;margin-right: 2px;"
              :src="photo" 
              :preview-src-list="props.row.secondHand.photos.split(',')">
            </el-image>
          </div>
        </template>
      </el-table-column>
      <el-table-column
      type="selection"
      width="100">
      </el-table-column>
      <el-table-column
        prop="orderCode"
        label="订单号"
        align="center"
        width="180">
        
      </el-table-column>
      <el-table-column
        prop="secondHand.title"
        label="商品信息"
        align="center"
        width="180">
        
      </el-table-column>
      <el-table-column
          prop="secondHand.user.username"
          label="卖家"
          align="center"
          width="100">
          
      </el-table-column>
      <el-table-column
        prop="user.username"
        label="买家"
        align="center"
        width="100">
        
      </el-table-column>
      <el-table-column
        prop="prices"
        sortable
        width="100px"
        align="center"
        label="商品价格">
      </el-table-column>
      <el-table-column
        prop="num"
        sortable
        width="100px"
        align="center"
        label="购买数量">
      </el-table-column>
      <el-table-column
        prop="addr.phone"
        sortable
         align="center"
         width="120px"
        label="电话">
      </el-table-column>
      <el-table-column
        prop="addr.address"
        width="100px"
        sortable
        align="center"
        label="地址">
      </el-table-column>
      
      <el-table-column
        prop="status"
         align="center"
         width="200px"
        label="商品状态">
        <template slot-scope="scope">
       
        <el-tag type="green" v-if="scope.row.status==1" >未支付</el-tag>
        <el-tag type="danger" v-if="scope.row.status==2">已取消订单</el-tag>
        <el-tag type="danger" v-if="scope.row.status==3" >已支付</el-tag>
        <el-tag type="green" v-if="scope.row.status==4" >已退货</el-tag>
      </template>
      </el-table-column>
       <el-table-column
      label="操作"
      width="200">
      <template slot-scope="scope">
        
        <el-button type="text" size="small"  @click="removeOne(index,scope.row)">删除</el-button>
      </template>
    </el-table-column>

      
    </el-table>
<!-- 查看详情 -->
<el-dialog
    title="订单详情"
    :visible.sync="dialogVisible"
    align="center"
    width="50%"
  >
     
      <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
    
  </el-dialog>
    <!-- 分页组件，页数小于等于1时不显示 -->
      <el-col>
        <el-pagination
          background
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          :page-sizes="[5, 10, 15, 20, 25]"
          :page-size="information.size"
          :total="information.total"
          :hide-on-single-page="hidePagination"
          layout="prev, pager, next, sizes, total">
        </el-pagination>
      </el-col>
     </el-main>
</template>
<script>

    export default {
      data(){
        return {
          information:[],
          idePagination:true,
          currentOrder:{},
          size:5,
          page:1,
          hidePagination:false,
          dialogVisible:false,
          tableData:[],
          multipleSelection:[],
          secondType:[],
          value:'',
          findUtil:{
            size: 5,
            page: 1,
            kind: 1, //1为查所有 2为根据商品类型查询
            id:'',
            message:''
          }
        }
        
      },
      computed:{
        
      },
      methods: {
        handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      handleCurrentChange:function(page){
          this.findUtil.page=page
          this.pageMessageChange()
          
       } ,
       handleSizeChange:function(size){
          this.findUtil.size=size
          this.pageMessageChange()
         
      },
      isSta:function(status){
          if(status==0){
            return 未上架
          }
      },
      /* 支付 */
      pay:function(scope){

      },
      /* 退货 */
      salesReturn:function(scope){
        
        this.$axios.get("http://localhost:8080/second/setOrderStatus/"+scope.row.id+"/"+2).then(res=>{
          
          if(res.data.status= "SUCCESS"){
            this.$message.success("修改成功")
            scope.row.status=2
          }else{
            this.$message.success("修改失败")
          }
        })
        
      },

      
      removeOne:function(index,val){
        let arr = [val]
        this.$axios.post("http://localhost:8080/second/removeOrder",arr).then(res => {
            
            this.pageMessageChange()
            if(res.data.status == "SUCCESS"){
            this.$message.success("删除成功")
          
          }else{
            this.$message.error("删除失败")
          }
          })
        
      },
      removeClick:function(index){
        this.$confirm('此过程要全部删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          
          this.$axios.post("http://localhost:8080/second/removeOrder",this.multipleSelection).then(res => {
            this.pageMessageChange()
            
            if(res.data.status == "SUCCESS"){
            this.$message.success("删除成功")
            
          }else{
            this.$message.error("可能部分没有删除")
          }
          })
         
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消操作'
          });  
          });       
        
         

        
      },
      pageMessageChange(){
        this.$axios.post("http://localhost:8080/second/findOrder/",this.findUtil).then(res => {
          if(res.data.status == "SUCCESS"){
            this.information = res.data.data
            console.log(res.data.data);
            
          }else{
            this.$message.error("没有查到该数据")
            this.information = []
          }
        })
      },
      // 获取选择之后的商品
      findSecond:function(){
      
        this.findUtil.page=1
        this.findUtil.size=5
        if(this.value==''|this.value==null){
          this.findUtil.kind=1
        }else{
          this.findUtil.kind=2
          this.findUtil.id = this.value
        }
        
        this.pageMessageChange()
      },
      /* 默认页 */
      initPage:function(){
        this.findUtil.page=1
        this.findUtil.size=5
        this.findUtil.kind=1
        this.pageMessageChange()
      }
      
      },
      mounted() {
        
        //获取信息
       this.pageMessageChange()
      
        //查找商品类别
       this.$axios.get("http://localhost:8080/second/findKind/" ).then(res => {
          if(res.data.status= "SUCCESS"){
            this.secondType=res.data.data
            console.log(res.data.data);
          }else{
           this.$message.error("类别查找失败")
          }
        })
      }
    }
</script>

<style scoped>

</style>
